import Vue from "vue";
import VueRouter from "vue-router";
import Login from "@/pages/Login/index";
Vue.use(VueRouter);
const Register = () =>
  import(/* webpackChunkName: "register" */ "@/pages/Register/index.vue");
const PersonReg = () =>
  import(
    /* webpackChunkName: "person-reg" */ "@/pages/Register/PersonReg/index.vue"
  );
const StaffReg = () =>
  import(
    /* webpackChunkName: "staff-reg" */ "@/pages/Register/StaffReg/index.vue"
  );
const SelectedReg = () =>
  import(
    /* webpackChunkName: "selected-reg" */ "@/pages/Register/SelectedReg.vue"
  );
const SelectPackage = () =>
  import(
    /* webpackChunkName: "select-package" */ "@/pages/Person/SelectPackage/index.vue"
  );
const SelectStaff = () =>
  import(
    /* webpackChunkName: "select-staff" */ "@/pages/Person/SelectStaff/index.vue"
  );
const Order = () =>
  import(/* webpackChunkName: "order" */ "@/pages/Person/Order/index.vue");
const OrderStatus = () =>
  import(
    /* webpackChunkName: "order-status" */ "@/pages/OrderStatus/index.vue"
  );
const Comment = () =>
  import(/* webpackChunkName: "comment" */ "@/pages/Comment/index.vue");
const SelectOrder = () =>
  import(
    /* webpackChunkName: "select-order" */ "@/pages/Staff/SelectOrder/index.vue"
  );
const OrderDetail = () =>
  import(
    /* webpackChunkName: "order-detail" */ "@/pages/Staff/OrderDetail/index.vue"
  );
const StaffDetail = () =>
  import(
    /* webpackChunkName: "staff-detail" */ "@/pages/Person/StaffDetail/index.vue"
  );
const Clause = () =>
  import(/* webpackChunkName: "clause" */ "@/pages/Clause/index.vue");
const Pay = () => import(/* webpackChunkName: "pay" */ "@/pages/Pay/index.vue");
const routes = [
  {
    path: "/",
    name: "Login",
    component: Login,
  },
  {
    path: "/register",
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: Register,
    children: [
      {
        path: "",
        name: "Register",
        component: SelectedReg,
      },
      {
        path: "person",
        name: "Person",
        component: PersonReg,
      },
      {
        path: "staff",
        name: "Staff",
        component: StaffReg,
      },
    ],
  },
  {
    path: "/select_package",
    name: "SelectPackage",
    component: SelectPackage,
  },
  {
    path: "/select_staff",
    name: "SelectStaff",
    component: SelectStaff,
  },
  {
    path: "/order",
    name: "Order",
    component: Order,
  },
  {
    path: "/order_status",
    name: "OrderStatus",
    component: OrderStatus,
  },
  {
    path: "/comment",
    name: "Comment",
    component: Comment,
  },
  {
    path: "/select_order",
    name: "SelectOrder",
    component: SelectOrder,
  },
  {
    path: "/order_detail",
    name: "OrderDetail",
    component: OrderDetail,
  },
  {
    path: "/staff_detail",
    name: "StaffDetail",
    component: StaffDetail,
  },
  {
    path: "/clause/:title",
    name: "Clause",
    component: Clause,
  },
  {
    path: "/pay",
    name: "Pay",
    component: Pay,
  },
];

const router = new VueRouter({
  mode: "hash",
  base: process.env.BASE_URL,
  routes,
});

export default router;
